<template>
  <div class="app-container" v-loading="loading">
    <template v-if="queryFormDef != null">
      <!-- 查询区 -->
      <el-form ref="queryForm" :inline="true" :model="queryFormData" label-width="80px">
          <component v-for="condDef in queryFormDef.conds" :key="condDef.component.name"
            :is="condDef.component.type"
            :componentDef="condDef.component"
            :formMode="queryFormMode"
            :formData="queryFormData"
          >
          </component>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="medium " @click="handleQueryForm" >搜索</el-button>
          <el-button icon="el-icon-refresh" size="medium " @click="$refs['queryForm'].resetFields()" >重置</el-button>
        </el-form-item>
      </el-form>

      <!-- 工具区 -->
      <el-row :gutter="10" :align="'middle'" :type="'flex'" :justify="'end'" class="mb8">
        <el-col :span="1.5" v-if="queryFormDef.tools.add.opened" >
          <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="toolAdd" >新增</el-button>
        </el-col>
        <el-col :span="1.5" v-if="queryFormDef.tools.delete.opened" >
          <el-button type="danger" plain icon="el-icon-delete" size="mini" @click="toolDelete" >删除</el-button>
        </el-col>
        <el-col :span="1.5" v-if="queryFormDef.tools.upload.opened" >
          <el-button type="info" plain icon="el-icon-upload2" size="mini" @click="toolUpload" >导入</el-button>
        </el-col>
        <el-col :span="1.5" v-if="queryFormDef.tools.export.opened" >
          <el-button type="warning" plain icon="el-icon-download" size="mini" @click="toolExport" >导出</el-button>
        </el-col>
        <!-- 定制工具 -->
        <template v-for="toolDef in queryFormDef.toolExts"  >
          <el-col :span="1.5" :key="toolDef.name" v-if="toolDef.opened" >
            <el-button :type="toolDef.elType" plain :icon="toolDef.elIcon" size="mini" @click="toolExtFn(toolDef)" >{{ toolDef.name }}</el-button>
          </el-col>
        </template>
      </el-row>

      <!-- 表格区 -->
      <el-table :data="tableData" :border="true" @selection-change="handleSelectionChange" class="mb8">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <template v-for="tableColumnDef in queryFormDef.tableColumns">
          <el-table-column :key="tableColumnDef.prop" v-if="tableColumnDef.component"
            :prop="tableColumnDef.prop"
            :label="tableColumnDef.label"
            :sortable="tableColumnDef.sortable == true"
            :width="tableColumnDef.width">
            <template slot-scope="scope">
              <component 
                :is="tableColumnDef.component.type"
                :componentDef="tableColumnDef.component"
                :code="tableColumnDef.prop"
                :formData="scope.row"
              ></component>
            </template>
          </el-table-column>
          <el-table-column :key="tableColumnDef.prop" v-else
            :prop="tableColumnDef.prop"
            :label="tableColumnDef.label"
            :sortable="tableColumnDef.sortable == true"
            :width="tableColumnDef.width">
          </el-table-column>
        </template>
        <el-table-column label="操作" :width="150" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              v-if="queryFormDef.operations.modify.opened"
              size="mini"
              type="text"
              :icon="queryFormDef.operations.modify.elIcon"
              @click="operationModify(scope.row)"
            >修改</el-button>
            <el-button
              v-if="queryFormDef.operations.delete.opened"
              size="mini"
              type="text"
              :icon="queryFormDef.operations.delete.elIcon"
              @click="operationDelete(scope.row)"
            >删除</el-button>
            <!-- 定制操作 -->
            <template v-for="operationDef in queryFormDef.operationExts"  >
              <el-button :key="operationDef.name"
                v-if="operationDef.opened"
                size="mini"
                type="text"
                :icon="operationDef.elIcon"
                @click="operationExtFn(scope.row,operationDef)" 
              >{{ operationDef.name }}</el-button>
            </template>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页区 -->
      <el-row :gutter="10" :align="'middle'" :type="'flex'" :justify="'end'" class="mb8">
        <el-col :span="1.5">
          <el-pagination background
            @size-change="handleQueryForm"
            @current-change="handleCurrentChange"
            layout="slot, total, sizes, prev, pager, next, jumper"
            :disabled="queryFormDef.page.disabled"
            :page-sizes="queryFormDef.page.pageSizes"
            :current-page="page.pageNum"
            :page-size="page.pageSize"
            :total="page.total">
            <el-button type="text" class="el-icon-refresh" @click="handleQueryForm"></el-button>
          </el-pagination>
        </el-col>
      </el-row>

    </template>
  </div>
</template>   
<script>
import "@/views/simpleform/style/simpleform.css"

import SfInput from "@/views/simpleform/components/base/SfInput/index.vue"
import SfSelect from "@/views/simpleform/components/base/SfSelect/index.vue"
import SfDateRange from "@/views/simpleform/components/base/SfDateRange/index.vue"

import SftProgress from "@/views/simpleform/components/table/SftProgress/index.vue"


import apiUtils from "../../util/apiUtils.js"
import listApi from "../../api/data/simpleFormDataList.js"

export default {
  components: {
    "sfInput": SfInput,
    "sfSelect": SfSelect,
    "sfDateRange": SfDateRange,
    "sftProgress": SftProgress
  },
  name: "SfList",
  data(){
    return {
      loading: true,
      selections: [],

      queryFormMode: 'edit',
      queryFormCode: null,
      queryFormDef: null,

      queryFormData: null,
      page: {
        pageNum: 1,
        pageSize: 50,
        total: 0
      },
      tableData: [],
    }
  },
  created(){
    this.initQueryForm();
  },
  methods: {
    initQueryForm(){
      let self = this;
      self.queryFormCode = self.$route.query.queryFormCode;
      apiUtils.promisePlus(self,"表单查询初始化",listApi.initQueryForm(self.queryFormCode),(res)=>{
        self.queryFormData = res.data.queryFormData; // 默认查询内容
        self.queryFormDef = res.data.queryFormDef;
        if (self.queryFormDef.queryOnLoad){
          self.handleQueryForm();
        }
      });
    },
    actionQueryFn(url, msg){
      let self = this;
      apiUtils.promisePlus(self,msg,listApi.actionQueryFn(url, self.queryFormCode, self.queryFormData),()=>{
        self.$message({
          message: msg+'成功',
          type: 'success'
        });
      });
      
    },

    actionIdsFn(url, msg, ids){
      let self = this;
      apiUtils.promisePlus(self,msg,listApi.actionIdsFn(url, self.queryFormCode, ids),()=>{
        self.$message({
          message: msg+'成功',
          type: 'success'
        });
      });
    },
    toolAdd(){
      //TODO 
    },
    toolDelete(){
      let ids = this.selections.map(item=>item.id);
      this.actionIdsFn("/api/simpleFormData/delete", "删除", ids)
    },    
    toolUpload(){
      //TODO 
    },
    toolExport(){
      //TODO 
    },
    toolExtFn(toolDef){
      if (toolDef.actionType == 'query'){
        this.actionQueryFn(toolDef.url,toolDef.name)
      } else if (toolDef.actionType == 'ids'){
        let ids = this.selections.map(item=>item.id);
        this.actionIdsFn(toolDef.url,toolDef.name, ids)
      }
    },
    operationModify(row){
      console.log("modify",row)
      // TODO
    },
    operationDelete(row){
      let ids = [row.id];
      this.actionIdsFn("/api/simpleFormData/delete", "删除", ids)
    },
    operationExtFn(row,operationDef){
      if (operationDef.actionType == 'query'){
        this.actionQueryFn(operationDef.url,operationDef.name)
      } else if (operationDef.actionType == 'ids'){
        let ids = [row.id];
        this.actionIdsFn(operationDef.url,operationDef.name, ids)
      }
    },

    handleSelectionChange(selections){
      this.selections = selections;
    },

    handleCurrentChange() {
      let self = this;
      apiUtils.promisePlus(self,"表单查询",listApi.queryForm(self.queryFormDef.queryUrl, self.queryFormCode, self.queryFormData, self.page),(res)=>{
        self.tableData = res.data.rows;
      });
    },

    handleQueryForm() {
      let self = this;
      self.page.pageNum = 1
      apiUtils.promisePlus(self,"表单查询",listApi.queryForm(self.queryFormDef.queryUrl, self.queryFormCode, self.queryFormData, self.page),(res)=>{
        self.tableData = res.data.rows;
        self.page.total = res.data.total;
      });
    }

  }
  
}


</script>